<script setup lang="ts">
import { useReumeStore } from '@/stores'
import { toRefs } from 'vue'
import EditableText from '../EditableText/index.vue'

const { isEntry } = defineProps<{
  isEditing: boolean
  isEntry: any
}>()
const entry = defineModel<{
  title: string
  contentList: {
    title: string
    subTitle: string
    time: string
    content: string
  }[]
}>()

const useReume = useReumeStore()
const { entryList } = toRefs(useReume)

/** 添加卡片 */
function onAddCard() {
  const index = entryList.value.indexOf(isEntry)
  entryList.value.splice(index + 1, 0, {
    id: Date.now(),
    title: '新卡片',
    contentList: [
      {
        title: '新卡片',
        subTitle: '新卡片',
        time: '新卡片',
        content: '新卡片',
      },
    ],
  })
}
/** 删除卡片 */
function onDelCard() {
  if (isEntry) {
    entryList.value = entryList.value.filter(item => item.id !== isEntry.id)
  }
}
</script>

<template>
  <div
    v-if="entry"
    class="mb-5px p-1 pos-relative"
    :class="{ 'editable-card-hover': isEditing }"
  >
    <div
      class="py-5px font-600 border border-b-1 border-b-solid border-b-black"
    >
      <EditableText v-model="entry.title" :is-editing="isEditing" />
    </div>
    <div class="mt-10px flex items-center justify-between">
      <EditableText
        v-model="entry.contentList[0].title"
        class="flex-1 text-left"
        :is-editing="isEditing"
      />
      <EditableText
        v-model="entry.contentList[0].subTitle"
        class="w-fit min-w-[100px] text-center"
        :is-editing="isEditing"
      />
      <EditableText
        v-model="entry.contentList[0].time"
        class="flex-1 text-right"
        :is-editing="isEditing"
      />
    </div>
    <div class="mt-10px">
      <EditableText
        v-model="entry.contentList[0].content"
        :is-editing="isEditing"
      />
    </div>

    <div class="r-control hidden">
      <p @click="onAddCard">
        添加
      </p>
      <p @click="onDelCard">
        删除
      </p>
    </div>
    <div class="b-control hidden">
      h
    </div>
  </div>
</template>

<style lang="scss" scoped>
.editable-card-hover {
  box-shadow: 0 0 0 1px #071524;
  &:hover {
    .r-control {
      padding-left: 4px;
      bottom: 0;
      right: -34px;
      display: block;
      position: absolute;
      text-align: right;
      p {
        background: cadetblue;
      }
    }
    .b-control {
      bottom: -10px;
      right: 10%;
      display: block;
      position: absolute;
    }
  }
}
</style>
